lightGray = #292929

user-select()
  -moz-user-select arguments
  -khtml-user-select arguments
  -ms-user-select arguments
  -webkit-user-select arguments
  user-select arguments

selected-div()
  background #00498F url(img/ui-bg_dots-small_40_00498f_2x2.png) 50% 50% repeat
  color #fff

slider-handle()
  -webkit-appearance none
  background-color white
  border 1px solid #333
  box-shadow inset 0 0 10px rgba(0, 0, 0, 0.5)
  border-radius 3px

html
  background url(img/ui-bg_diagonals-thick_15_0b3e6f_40x40.png)

body
  font-family Arial, Helvetica, sans-serif

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td
  margin 0
  padding 0

ol, ul
  list-style none

input, textarea, select
  font-size inherit

a:hover,a:active,a:focus
  outline 0

.button
  background #333333 url("img/ui-bg_dots-small_20_333333_2x2.png") 50% 50% repeat
  margin 3px 1px 1px 1px
  padding 5px
  border 0
  border-radius 4px
  color #fff
  font-weight bold
  font-size 13px
  cursor pointer

  span
    display inline-block

  label
    cursor pointer
    vertical-align top

.button:hover
  background #00498f url("img/ui-bg_dots-small_40_00498f_2x2.png") 50% 50% repeat

.button:disabled
  opacity .35
  background-image none

.button:focus
  outline 0

.button.on
  margin 2px 0 0px 0px
  border 1px solid #096ac8
  background #292929 url("img/ui-bg_flat_40_292929_40x100.png") 50% 50% repeat-x
  font-weight bold
  color #75abff

#stream-btn
  padding-right 11px

input[type=range]
  -webkit-appearance none
  margin 10px 10px 5px
  width calc(100% - 20px)
  height 14px
  border-radius 4px
  border 1px solid #000
  background #282828 url("img/bright-10.png") left no-repeat
  background-size 0% 100%

input[type=range]::-moz-range-track
  border none
  background transparent

input[type="range"]::-webkit-slider-thumb
  slider-handle()
  height 16px
  width 14px

input[type="range"]::-moz-range-thumb
  slider-handle()
  height 14px
  width 12px

input[type=range]:focus
  outline 0

.widget
  border 1px solid #000000
  background #111111 url("img/ui-bg_gloss-wave_20_111111_500x100.png") 50% top repeat-x
  color #d9d9d9
  border-radius 4px

  a
    color #96b7eb

.icon
  width 16px
  height 16px
  background-image url("img/ui-icons_9ccdfc_256x240.png")
  display block
  background-repeat no-repeat

button:hover .icon
  background-image url("img/ui-icons_ffffff_256x240.png")

.icon-seek-next
  background-position -32px -160px

.icon-seek-prev
  background-position -48px -160px

.icon-play
  background-position 0 -160px

.icon-pause
  background-position -16px -160px

.icon-stop
  background-position -96px -160px

.icon-signal-diag
  background-position -16px -176px

.icon-volume-off
  background-position -128px -160px

.icon-volume-on
  background-position -144px -160px

.icon-info
  background-position -16px -144px

.icon-alert
  background-position 0 -144px

.icon-triangle-1-e
  background-position -32px -16px

.icon-triangle-1-se
  background-position -48px -16px

.icon-closethick
  background-position -96px -128px

.icon-trash
  background-position -176px -96px

.icon-tag
  background-position -240px -96px

#blackout
  position fixed
  left 0
  top 0
  width 100%
  height 100%
  background-color rgba(0, 0, 0, 0.5)
  z-index 2

#modal
  z-index 3
  position fixed

#modal-header
  border-radius 4px
  border 1px solid #0b3e6f
  background #0b3e6f url("img/ui-bg_diagonals-thick_15_0b3e6f_40x40.png") 50% 50% repeat
  color #f6f6f6
  font-weight bold
  font-size 21px
  padding 13px

#modal-close
  float right

#modal-content
  padding 4px 20px
  overflow-x auto
  overflow-y auto

#modal-content div:focus
  outline 0

#context-menu
  position fixed
  z-index 1
  font-weight normal
  width 274px

  li
    a
      font-size 16px
      text-decoration none
      display block
      color #d9d9d9
      padding 3px 12px

#context-menu li.disabled a
  opacity 0.35

#context-menu li a:hover
  font-weight bold
  color #ffffff
  background #00498f url("img/ui-bg_dots-small_40_00498f_2x2.png") 50% 50% repeat

#client-vol-slider
  margin 3px

#vol-slider
  margin 3px 0 0 0

#nowplaying
  margin 6px auto
  text-align center

  .playback-btns
    float left

  h1
    font-size 16px
    letter-spacing 0.1em
    margin-top 8px
    font-weight bold

#nowplaying-time-elapsed
  float left
  margin 4px
  font-weight bold
  font-family monospace

#nowplaying-time-left
  float right
  margin 4px
  font-weight bold
  font-family monospace

#client-vol, #vol
  margin 8px
  span
    float left

#client-vol-slider, #vol-slider
  float left
  height 10px

  .ui-slider-handle
    height 16px
    width 16px
    margin-top 2px

#client-vol-slider
  width 60px

#vol-slider
  width 300px

#vol-warning
  color #B63434

#vol-warning a
  color #57BF3B

#left-window
  width 400px
  position absolute

#library-pane
  .window-header
    height 30px

#tabs
  user-select none

  ul
    li
      display inline-block
      background #333333 url("img/ui-bg_dots-small_20_333333_2x2.png") 50% 50% repeat
      color #fff
      margin 0
      padding 6px
      cursor pointer
      font-size 13px
      border-top-left-radius 4px
      border-top-right-radius 4px
      border 1px solid transparent

      &.active, &.active:hover
        border 1px solid #096ac8
        border-bottom 0
        color #75abff
        background #292929 url("img/ui-bg_flat_40_292929_40x100.png") 50% 50% repeat-x

      &:hover
        border 1px solid #222222
        border-bottom 0
        background #00498f url("img/ui-bg_dots-small_40_00498f_2x2.png") 50% 50% repeat

#library, #playlists
  overflow-y auto

  user-select none
  cursor default

  div.icon
    float left

  p
    border 1px solid #052f57
    background #0b58a2 url("img/ui-bg_dots-medium_30_0b58a2_4x4.png") 50% 50% repeat
    color #ffffff
    border-radius 4px
    text-align center
    margin 20px auto 0
    padding 4px
    width 150px
    span
      float left
      margin-right .3em
      background-image url("img/ui-icons_ffffff_256x240.png")
    strong
      font-weight bold

  ul
    ul
      margin-left 9px
      ul
        margin-left 16px

    div.selected
      selected-div()

    div.cursor
      text-decoration underline

#lib-filter
  margin 4px
  width 175px

#user-id
  cursor pointer

#organize
  width 191px

#queue-window
  width 700px
  position absolute

  .window-header
    margin-bottom 4px
    font-size .6em

#queue-duration, #queue-duration-label
  font-size 1.4em

#queue-list
  .header
    font-weight bold
    overflow-x hidden
    overflow-y hidden
    height 1.2em

  .track
    width 26px
    float left

  .title
    width calc(40% - 12px)
    float left

  .artist
    width 30%
    float left

  .album
    width 30%
    float left

  .time
    min-width 41px
    float right

  .middle
    overflow hidden
    display block

  .track, .title, .artist, .album, .time
    white-space nowrap
    height 1.2em
    overflow-x hidden
    overflow-y hidden
    display block
    margin-right 4px

#queue-items
  overflow-y auto
  overflow-x hidden
  clear both

  width 100%

  user-select none

  div
    clear both
    overflow-x hidden
    overflow-y hidden
    height 1.2em
    cursor default

  div:nth-child(2n+1)
    background-color #2A2A2A

  .random
    color #96B7EB

  .old
    color #555555

  .selected
    selected-div()

  .current
    border 1px solid #096AC8
    background-color lightGray
    font-weight bold
    color #75abff

  .cursor
    span
      text-decoration underline

  .border-bottom
    border-bottom 2px dashed #ffffff

  .border-top
    border-top 2px dashed #ffffff

  .track
    text-align right

  .time
    text-align right

#upload
  overflow-y auto
  padding 4px
  h1
    font-size 1.4em
    margin 4px 0

#upload-widget
  padding 10px

#upload-by-url, #import-by-name
  width 370px

#shortcuts
  h1
    font-size 21px
    margin-bottom 10px
    margin-top 10px
    font-weight bold

  dl
    font-size 17px
    margin-bottom 4px

    dt
      font-family monospace
      display inline
      padding 3px
      background-color #272727
      font-weight bold
      font-size 14px
      text-shadow 1px 1px 0 #000000
      border-radius 4px

      em
        font-weight normal
        color #afafaf
        text-shadow none

    dd
      display inline

#edit-tags
  font-size 21px

#main-err-msg
  border 1px solid #cd0a0a
  background #a32d00 url("img/ui-bg_dots-small_30_a32d00_2x2.png") 50% 50% repeat
  color #ffffff
  border-radius 4px
  margin 200px auto
  width 142px
  padding 4px
  span
    float left
    margin-right .3em
    background-image url("img/ui-icons_ffffff_256x240.png")
  strong
    font-weight bold

#settings
  padding 6px
  .section
    margin-bottom 14px
    h1
      font-weight bold
      font-size 1.4em
    h2
      font-size 1.1em
      font-weight bold
    button, label
      font-size .8em
    em
      font-style italic
    ul
      font-size .9em
      li:before
        content "\2713"

#auth-username, #auth-password
  width 300px

#settings-users-select
  width 350px

#settings-delete-user
  margin-right 20px

#settings-request
  background-color lightGray
  border-radius 4px
  padding 4px

#request-name
  width 290px

#request-replace
  width 294px

#events-online-users
  max-height 90px
  overflow-y auto

  .user
    width 180px
    overflow-x hidden
    float left
    .streaming
      float left
    .name
      float left

.accesskey
  text-decoration underline

.perm
  background-color lightGray
  color #96B7EB
  padding 2px
  border-radius 4px

#events-list
  overflow-y auto
  font-size 0.9em

  .name
    width 29%
    float left
    overflow-x hidden
    overflow-y hidden
    text-align right
    height 16px
    white-space nowrap
  .msg
    float left
    width 69%
    margin-left 4px
    word-wrap break-word
  .event
    padding-top 2px
    &.chat-me
      color #A6A6A6
      font-size 0.95em
      font-style italic
  .chat
    background-color lightGray

#import-progress-list
  overflow-y auto

#chat-box-input
  width 100%

#edit-tags
  div
    margin-bottom 6px

  .field
    width 177px
    display block
    float left
    text-align right
    padding-right 6px

  input[type='text']
    width 400px

#add-to-playlist-list li, #add-to-playlist-new, .label-dialog-name, #add-remove-label-new
  font-size 16px
  text-decoration none
  display block
  color #d9d9d9
  padding 3px 12px
  cursor pointer
  user-select none

#add-to-playlist-list li:hover, #add-to-playlist-new:hover, .label-dialog-name:hover, #add-remove-label-new:hover
  font-weight bold
  color #ffffff
  background #00498f url("img/ui-bg_dots-small_40_00498f_2x2.png") 50% 50% repeat

.label-dialog-trash, .label-dialog-rename
  float right
  display block
  margin -1px 0 0 4px

.label-dialog-color
  float right

.label-dialog-name
  display block
  overflow hidden

.label-dialog-checkbox
  float left
  display block
  margin 6px 0 0 4px

.label-dialog-item
  clear both
  height 32px

#add-remove-label-new
  clear both

.label-box
  display block
  width 12px
  height 12px
  float right
  margin-top 4px
  margin-left 4px
  border-radius 10px
